<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="200" height="200" style="border: 1px solid #000"></canvas>
    <button id="download">下载图片</button>
    <script>
      const canvas = document.querySelector('#canvas');
      const ctx = canvas.getContext('2d');
      // 绘制一个美丽的彩虹渐变圆形图案
      // 设置画布大小
      canvas.width = 200;
      canvas.height = 200;

      // 创建渐变背景
      const gradientBg = ctx.createLinearGradient(0, 0, 0, canvas.height);
      gradientBg.addColorStop(0, '#e3f2fd');
      gradientBg.addColorStop(1, '#f3e5f5');
      ctx.fillStyle = gradientBg;
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 绘制彩虹圆形
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = 80;

      // 彩虹色数组
      const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#8b00ff'];

      // 绘制嵌套的彩色圆环
      for (let i = 0; i < colors.length; i++) {
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius - i * 10, 0, 2 * Math.PI);
        ctx.lineWidth = 10;
        ctx.strokeStyle = colors[i];
        ctx.stroke();
      }

      // 添加一个白色中心点
      ctx.beginPath();
      ctx.arc(centerX, centerY, 10, 0, 2 * Math.PI);
      ctx.fillStyle = '#ffffff';
      ctx.fill();

      // 添加一些装饰性的星星
      drawStar(ctx, 30, 30, 5, 8, 4);
      drawStar(ctx, 170, 30, 5, 8, 4);
      drawStar(ctx, 30, 170, 5, 8, 4);
      drawStar(ctx, 170, 170, 5, 8, 4);

      // 绘制星星的辅助函数
      function drawStar(context, x, y, points, outerRadius, innerRadius) {
        let angle = (Math.PI / 2) * 3;
        let x1 = x;
        let y1 = y;
        const step = Math.PI / points;

        context.beginPath();
        context.moveTo(x, y - outerRadius);

        for (let i = 0; i < points; i++) {
          x1 = x + Math.cos(angle) * outerRadius;
          y1 = y + Math.sin(angle) * outerRadius;
          context.lineTo(x1, y1);
          angle += step;

          x1 = x + Math.cos(angle) * innerRadius;
          y1 = y + Math.sin(angle) * innerRadius;
          context.lineTo(x1, y1);
          angle += step;
        }

        context.lineTo(x, y - outerRadius);
        context.closePath();
        context.fillStyle = '#ffeb3b';
        context.fill();
        context.strokeStyle = '#ffd600';
        context.lineWidth = 1;
        context.stroke();
      }
      const download = document.querySelector('#download');
      download.onclick = () => {
        canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'snapshot.png';
          a.click();
          URL.revokeObjectURL(url);
        }, 'image/png');
      };
    </script>
  </body>
</html>
